<template>
  <div class="basic-container">
    <div class="basic-container-inner">
      <div class="tab-box">
        <a-tabs v-model:activeKey="state.activeKey" @change="activeKeyChange">
          <a-tab-pane key="2" tab="训练模式" force-render></a-tab-pane>
          <a-tab-pane key="3" tab="考核模式"></a-tab-pane>
        </a-tabs>
      </div>
      <div class="content-inner">
        <div class="content-top">
          <div class="top-inner">
            <div class="comNoData" v-if="state.isNoneFlag == false">
              <div class="noDataBox">
                <span class="icon iconfont icon-zanwushuju1"></span>
                <p>暂无数据</p>
              </div>
            </div>
            <div v-else class="list-inner" v-for="(item,index) in state.list.value" :key='index' @click='linkTo(item)'>
              <div class="img-box">
                <img class="image-inner" :src="item.imageUrl" />
              </div>
              <div class="list-title">
                <div class="list-tag" v-if="state.activeKey == 2">训练</div>
                <div class="list-tag list-tag-kaohe" v-if="state.activeKey == 3">考核</div>
                <div class="list-title-inner" :title='item.examName'>{{ item.examName }} </div>
              </div>
              <div class="list-des">上传人：{{ item.userName }}</div>  
              <div class="list-des">上传时间：{{ item.creatTime }}</div>  
              <div class="list-des">视频时长：{{ item.videoTime }}s</div>  
              <div class="list-des">佣金：暂时没有</div>  
            </div>
            <div class="item-empty"></div>
            <div class="item-empty"></div>
            <div class="item-empty"></div>
            <div class="item-empty"></div>
          </div>
        </div>
        <div class="content-page">
          <div class="page-choose"></div>
          <div class="page-inner">
            <div class="page-count">
              总共 {{ page.total }} 条
            </div>
            <a-pagination
              v-model:current="page.current"
              v-model:pageSize="page.pageSize"
              show-size-changer
              :total="page.total"
              @showSizeChange="onShowSizeChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { reactive ,defineComponent } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { getVideoList,examRecordsList } from '@/api/model/exam';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    setup(props, ctx) {
      const router = useRouter(); //相当于vue2中的this.$router
      const userStore = useUserStore();
      const page = reactive({
        current: 1,
        pageSize: 10,
        total: 0,
      });
      const state = reactive({
        list: [],
        isNoneFlag: false,
        activeKey: '2'
      });

      // 跳转
      const linkTo = (val) => {
        // 
        console.log(val)
        // router.push({ name: 'detailsPage' })
        // router.push('/waiting/details');
        if(val.typeCode == 2){
          router.push({ path: '/waiting/train-details', query: { id: val.id }  })
        }else{
          router.push({ path: '/waiting/test-details', query: { id: val.id }  })
        }
      }


      // 切换类型
      const activeKeyChange = (val) =>{
        state.activeKey = val
        if(val == 2){
          getVideoListHandle()
        }else if (val == 3){
          getExamRecordsList()
        }
      }


      // 改变分页大小
      const onShowSizeChange = () => {}

      // 用户信息
      const userInfo = userStore.getUserInfo

      // 获取考试列表
      const getExamRecordsList = () =>{
        let params = {
          // commentPersonId: userInfo.id,
          result: -1, // -1未打分  -2 已打分 
          // status: 1,
          limit: page.pageSize,
          page: page.current,
          // typeCode: state.activeKey, //1学习视频 2训练视频 3考核视频
          // personType: 2, //2 是专家
        }
        examRecordsList(params).then(res=>{
          page.total = res.data.total
          state.list.value = res.data.records
          if(state.list.value.length > 0){
            state.isNoneFlag = true
          }else{
            state.isNoneFlag = false
          }
        })
      }
      // 获取列表信息
      const getVideoListHandle = () =>{
        let params = {
          commentPersonId: userInfo.id,
          status: 0, //0 未点评 1 已点评
          limit: page.pageSize,
          page: page.current,
          typeCode: state.activeKey, //1学习视频 2训练视频 3考核视频
          personType: 2, //2 是专家
        }
        getVideoList(params).then(res=>{
          page.total = res.data.total
          state.list.value = res.data.records
          if(state.list.value.length > 0){
            state.isNoneFlag = true
          }else{
            state.isNoneFlag = false
          }
        })
      }

      // 默认运行
      getVideoListHandle()
      return{
        page,
        userInfo,
        state,
        getVideoListHandle,
        getExamRecordsList,
        activeKeyChange,
        onShowSizeChange,
        linkTo
      }
    },
  })
  
</script>
<style lang="less" scoped>
  .basic-container {
    display: contents;
    background: var(--osce-background-grey);

    .basic-container-inner{
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      align-items: flex-start;
      width: 1152px;
      height: calc(100vh - 40px);
      margin: 10px auto;
      padding: 24px;
      overflow: auto;
      border-radius: 8px;
      background: var(--osce--background-color);

      .tab-box{
        width: 1104px;
        margin: 0 auto;
        padding:0 6px;
      }

      .content-inner{
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 1104px;
        margin: 0 auto;

        .content-top{
          flex: 1;
          padding-top: 10px;

          .top-inner{
            display: flex; 
            flex-wrap: wrap; 
            justify-content: space-between; 
            width: 100%;
            // padding: 0 16px;

            .list-inner:hover{
              background: var(--osce--background-color);
              box-shadow: 0 2px 20px 0 rgb(0 0 0 / 10%);
            }

            .list-inner{
              width: 271px;
              height: 288px;
              margin-bottom: 20px; 
              padding: 10px;
              border-radius: 8px;
              // border: 1px solid pink;
              cursor: pointer;

              .img-box{
                width: 100%;
                height: 142px;
                overflow: hidden;
                border-radius: 6px;

                .image-inner{
                  width: 100%;
                  height: 100%;
                }
              }

              .list-title{
                display: flex;
                box-sizing: content-box;
                height: 21px;
                margin: 12px 0 8px;
                line-height: 21px;

                .list-tag{
                  height: 21px;
                  padding: 0 6px;
                  border-radius: 4px;
                  background: rgb(253 139 8 / 10%);
                  font-size: 12px;
                  line-height: 21px;
                }  

                .list-tag-kaohe{
                  background: rgb(0 187 204 / 10%);
                }

                .list-title-inner{ 
                  display: -webkit-box;
                  flex: 1;
                  padding-left: 4px;
                  overflow: hidden;
                  font-size: 15px;
                  font-weight: 600;
                  text-overflow: ellipsis; 
                  -webkit-line-clamp: 1; 
                  -webkit-box-orient: vertical; 
                }
              }

              .list-des{
                padding-bottom: 8px;
                color: var(--osce--gray-color);
                font-size: 12px
              }

            }

            .item-empty {
              width: 261px; 
              height: 1px; 
            }
          }
        }

        .content-page{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          padding: 0 10px;

          .page-inner{
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .page-count{
              padding:0 20px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  .comNoData{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 400px;

    .noDataBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--osce--border-color);

      .iconfont{
        font-size: 100px;
      }

      p{
        padding-top: 10px;
        color: var(--osce--gray-color);
        font-size: 14px;
      }
    }
  }
</style>
<style lang='scss'>
  .tab-box{
    .ant-tabs-nav{
      margin-bottom: 10px !important;
    }
  }
</style>
